<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getAdminInfo } from '@/api/admin';

// 定义两个响应式对象来存储两个管理员信息
const adminInfo1 = ref({
  name: '',
  contact: ''
});
const adminInfo2 = ref({
  name: '',
  contact: ''
});
// 获取当前信息的接口封装成一个函数，在任何情况下获取数据
const fetchAdminInfo = async () => {
  try {
    const response = await getAdminInfo();
    if (response.data) {
      adminInfo1.value.name = response.data[0].adminName;
      adminInfo1.value.contact = response.data[0].contact;

      adminInfo2.value.name = response.data[1].adminName;
      adminInfo2.value.contact = response.data[1].contact;
    }
  } catch (error) {
    console.error('获取管理员信息失败:', error);
    alert('获取管理员信息失败，请检查网络连接或稍后再试。');
  }
};

// 组件挂载完毕钩子---发一次请求，获取当前页面的信息，在组件挂载时获取管理员信息
onMounted(() => {
  fetchAdminInfo();
});
</script>

<template>
  <div class="admin-info-container">
    <div class="admin-info">
      <h1>管理员信息</h1>
      <p><strong>姓名:</strong> {{ adminInfo1.name }}</p>
      <p><strong>联系方式:</strong> {{ adminInfo1.contact }}</p>
    </div>
  </div>
  <div class="admin-info-container">
    <div class="admin-info">
      <h2>管理员信息</h2>
      <p><strong>姓名:</strong> {{ adminInfo2.name }}</p>
      <p><strong>联系方式:</strong> {{ adminInfo2.contact }}</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.admin-info-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .admin-info {
    h1, h2 {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    p {
      font-size: 16px;
      margin-bottom: 5px;

      strong {
        font-weight: 700;
        color: #333;
      }
    }
  }
}
</style>

